<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Pokémon Type Generator - Create Random Pokémon Types</title>
        <meta name="description" content="Generate random Pokémon types with our free online tool. Perfect for game developers, fan fiction writers, and Pokémon enthusiasts looking to add variety to their creations.">
        <meta name="keywords" content="pokémon type generator, random pokémon type, pokémon generator, pokémon type randomizer">
        <meta property="og:locale" content="en_US"/>
        <meta property="og:type" content="website"/>
        <meta property="og:title" content="Pokémon Type Generator - Create Random Pokémon Types"/>
        <meta property="og:description" content="Generate random Pokémon types with our free online tool. Perfect for game developers, fan fiction writers, and Pokémon enthusiasts looking to add variety to their creations."/>
        <meta property="og:url" content="https://pokemongenerator.xyz/type-generator"/>
        <meta property="og:image" content="/static/image.png">
        <meta property="og:site_name" content="pokemongenerator.xyz"/>
        <meta name="twitter:card" content="summary_large_image">
        <meta name="twitter:title" content="Pokémon Type Generator - Create Unique Pokémon Names">
        <meta name="twitter:description" content="Generate random Pokémon types with our free online tool. Perfect for game developers, fan fiction writers, and Pokémon enthusiasts looking to add variety to their creations.">
        <meta name="twitter:image" content="https://pokemongenerator.xyz/static/image.png">
        <link rel="canonical" href="https://pokemongenerator.xyz/type-generator"/>
        <link rel="icon" href="static/image.png" sizes="32x32"/>
        <link rel="stylesheet" href="static/base.css?version=0.0.15">
        <script type="application/javascript" src="static/base.js?ver=0.0.6"></script>
        <script type="application/javascript" src="static/data.js"></script>
        <!-- Google tag (gtag.js) -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=G-47TE63PW8V"></script>
        <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'G-47TE63PW8V');
        </script>
        <style>
            :root {
                --primary-color: #4a90e2;
                --secondary-color: #8D0B7C;
                --text-color: #333;
                --menu-text-color: #000000;
                --background-color: #ffffff;
                --header-background: #ffffff;
                --header-border-color: #e0e0e0;
            }
            
            body {
                font-family: 'Arial', sans-serif;
                background-color: var(--background-color);
                color: var(--text-color);
                margin: 0;
                padding: 0;
            }
            
            header {
                background-color: var(--header-background);
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                padding: 10px 0;
                border-bottom: 1px solid var(--header-border-color);
            }
            
            .container {
                max-width: 1200px;
                margin: 0 auto;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
            }
            
            .logo-container {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            
            .logo {
                width: 40px;
                height: 40px;
                cursor: pointer;
                transition: transform 0.3s ease;
            }
            
            .logo:hover {
                transform: scale(1.1);
            }
            
            .logo-text {
                color: var(--text-color);
                font-weight: bold;
                font-size: 1em; /* 调小了logo文本的大小 */
            }
            
            nav ul {
                list-style-type: none;
                display: flex;
                gap: 20px;
                margin: 0;
                padding: 0;
            }
            
            nav a {
                text-decoration: none;
                color: var(--menu-text-color);
                font-weight: 500;
                transition: color 0.3s ease;
            }
            
            nav a:hover {
                color: #8D0B7C !important; /* 紫色，使用 !important 确保优先级 */
                text-decoration: underline !important;
            }
            
            .user-info {
                display: flex;
                align-items: center;
                gap: 10px;
            }
            
            .user-info img {
                border-radius: 50%;
                width: 30px;
                height: 30px;
                border: 2px solid var(--primary-color);
            }
            
            #login-button {
                background-color: var(--primary-color);
                color: white;
                padding: 8px 16px;
                border-radius: 20px;
                cursor: pointer;
                transition: background-color 0.3s ease;
            }
            
            #login-button:hover {
                background-color: var(--secondary-color);
            }

            main {
                padding-top: 20px;
            }
            
            /* 添加以下新样式 */
            .menu-icon {
                display: none;
                font-size: 28px;
                cursor: pointer;
                color: rgb(92, 92, 96);
            }
            
            @media screen and (max-width: 768px) {
                .menu-icon {
                    display: block;
                }
                
                nav ul {
                    display: none;
                    position: absolute;
                    top: 60px;
                    left: 0;
                    width: 100%;
                    background-color: var(--header-background);
                    flex-direction: column;
                    padding: 10px 0;
                    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
                }
                
                nav ul.show {
                    display: flex;
                }
                
                nav ul li {
                    padding: 10px 20px;
                }
                
                nav a {
                    color: #000000; /* 确保移动端下拉菜单中的链接为黑色 */
                }
                
                nav a:hover {
                    color: #8D0B7C !important; /* 紫色，使用 !important 确保优先级 */
                    text-decoration: underline !important;
                }
            }
            
            /* 添加全局链接样式 */
            a {
                text-decoration: none;
                color: inherit;
                transition: color 0.3s ease, text-decoration 0.3s ease;
            }
            
            a:hover {
                color: #8D0B7C !important; /* 紫色，使用 !important 确保优先级 */
                text-decoration: underline !important;
            }

            .description-content {
                text-align: center;
                margin: 20px auto 30px;
                max-width: 800px;
                padding: 0 20px;
            }

            .main-description {
                font-size: 1.2em;
                line-height: 1.6;
                color: #444;
                margin-bottom: 25px;
            }

            .sub-descriptions {
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin-bottom: 30px;
            }

            .sub-descriptions p {
                margin: 0;
                color: #666;
                font-size: 1.1em;
            }

            .sub-descriptions strong {
                color: #8D0B7C;
            }

            @media (max-width: 768px) {
                .description-content {
                    padding: 0 15px;
                }
                
                .main-description {
                    font-size: 1.1em;
                }

                .sub-descriptions p {
                    font-size: 1em;
                }
            }
        </style>
        
    </head>
<body>
    <header>
        <div class="container">
            <div class="logo-container">
                <img src="static/image.png" alt="Random Pokémon Generator Logo" class="logo" onclick="window.location.href='/'">
                <span class="logo-text">Random Pokémon Generator</span>
            </div>
            <nav>
                <div class="hamburger-menu">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
                <ul id="menu">
                    <li><a href="/">Home</a></li>
                    <li><a href="/name-generator">Name Generator</a></li>
                    <li><a href="/type-generator">Type Generator</a></li>
                    <li><a href="/guess-game">Pokémon Guess Game</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const hamburgerMenu = document.querySelector('.hamburger-menu');
            const menu = document.getElementById('menu');

            if (hamburgerMenu) {
                hamburgerMenu.addEventListener('click', function() {
                    this.classList.toggle('active');
                    menu.classList.toggle('active');
                });
            }

            menu.addEventListener('click', function(e) {
                if (e.target.tagName === 'A' && window.innerWidth <= 768) {
                    hamburgerMenu.classList.remove('active');
                    menu.classList.remove('active');
                }
            });

            document.addEventListener('click', function(e) {
                if (window.innerWidth <= 768 && !menu.contains(e.target) && !hamburgerMenu.contains(e.target)) {
                    hamburgerMenu.classList.remove('active');
                    menu.classList.remove('active');
                }
            });

            window.addEventListener('resize', function() {
                if (window.innerWidth > 768) {
                    menu.classList.remove('active');
                    hamburgerMenu.classList.remove('active');
                }
            });
        });
    </script>
<main>
    <div class="section-container name-generator-container">
        <h1 class="generator-title">Pokémon Type Generator</h1>
        
        <div class="description-content">
            <p class="main-description">Discover the perfect type combination for your next Pokémon adventure! Whether you're creating a fan game, designing a new Pokémon, or just exploring possibilities, our Type Generator will inspire your creativity.</p>
            <div class="sub-descriptions">
                <p><strong>🎮 Game Designers:</strong> Find unique type combinations for your custom Pokémon.</p>
                <p><strong>✍️ Fan Fiction Writers:</strong> Add depth to your stories with interesting type matchups.</p>
                <p><strong>🎲 Role Players:</strong> Randomly determine types for your next Pokémon campaign.</p>
            </div>
        </div>

        <div class="generator-content">
            <button id="generateBtn">Generate Type</button>
            <div id="pokemonType" class="result"></div>
        </div>
    </div>

    <div class="section-container">
        <h2>Features</h2>
        <div class="features">
            <div class="feature">
                <i class="fas fa-random"></i>
                <h3>Random Type Generation</h3>
                <p>Discover unique Pokémon types with a single click.</p>
            </div>
            <div class="feature">
                <i class="fas fa-shield-alt"></i>
                <h3>Complete Type Coverage</h3>
                <p>Includes all official Pokémon types for authentic results.</p>
            </div>
            <div class="feature">
                <i class="fas fa-lightbulb"></i>
                <h3>Inspiration Tool</h3>
                <p>Perfect for creating new Pokémon concepts or team building.</p>
            </div>
        </div>
    </div>
    <section class="section-container">
        <h2>Frequently Asked Questions</h2>
        <div class="faq" onclick="toggleAnswer(this)">
            <div class="question">What is the Pokémon Type Generator used for?</div>
            <div class="icon">▼</div>
        </div>
        <div class="answer">The Pokémon Type Generator is a tool for randomly selecting Pokémon types. It's useful for creating new Pokémon concepts, planning team strategies, or adding an element of chance to your Pokémon-related activities.</div>

        <div class="faq" onclick="toggleAnswer(this)">
            <div class="question">Does this generator include all Pokémon types?</div>
            <div class="icon">▼</div>
        </div>
        <div class="answer">Yes, our generator includes all 18 official Pokémon types, ensuring you get authentic and comprehensive results every time.</div>

        <div class="faq" onclick="toggleAnswer(this)">
            <div class="question">Can I use this for my fan games or role-playing sessions?</div>
            <div class="icon">▼</div>
        </div>
        <div class="answer">Absolutely! This generator is perfect for adding randomness to your Pokémon fan projects, role-playing games, or any creative endeavors. Just remember that "Pokemon" is a trademark of Nintendo.</div>
    </section>

    <script>
        function generatePokemonType() {
            var pokemonTypeSize=TypeData.length;
            if (typeof PokemonData !== 'undefined' && pokemonTypeSize>0) {
                const randomIndex = Math.floor(Math.random() * pokemonTypeSize);
                const randomType = TypeData[randomIndex].label;
                document.getElementById('pokemonType').textContent = randomType;
            } else {
                console.error('TypeData is not defined or empty');
                document.getElementById('pokemonType').textContent = 'Error: Unable to generate type';
            }
        }

        // 确保 DOM 加载完成后绑定事件
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById('generateBtn').addEventListener('click', generatePokemonType);
        });

    </script>
</main>
<footer class="site-footer">
    <div class="container">
        <div class="footer-links">
            <a href="https://github.com/lipengxs/PokemonGenerator.git" target="_blank" rel="noopener noreferrer">Github</a>
            <a href="/privacy-policy">Privacy Policy</a>
            <a href="/terms-of-use">Terms of Use</a>
        </div>
        <p>&copy; 2024 <strong>Random Pokémon Generator</strong>. All rights reserved.</p>
    </div>
</footer>
</body>
</html>
